<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>抖音，记录美好生活</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
            }
            .container{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .bg-video{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -100;
            }
            .video-tvc{
                position: absolute;
                top: 0;
                left: -10%;
                height: 100%;
            }
            .content{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .header{
                width: 100%;
                height: 74.4px;
            }
            .header-right{
                width: 750px;
                height: 74.4px;
                float: right;
                margin-right: 150px;
                font-size: 16px;
                font-weight: 500;
            }
            .header-links{
                width: 100%;
                height: 100%;
                list-style: none;
                line-height: 75px;
                margin: 0;
                padding: 0;
            }
            .header-links-item{
                line-height: 55px;
                height: 55px;
                display: inline-block;
                vertical-align: middle;
                margin-left: 20px;
                position: relative;
            }
            .header-links-item>a{
                color: #fff;
                text-shadow: 0 1px 2px rgba(0,0,0,.4);
                vertical-align: middle;
            }
            .create-platform{
                position: absolute;
                background-image: url("create-bubble.png");
                background-position: 0 0;
                background-size: cover;
                top: 45px;
                left: 50%;
                margin-left: -99px;
                height: 42px;
                width: 198px;
                font-size: 14px;
                color: rgba(255,255,255,.9);
                text-align: center;
                line-height: 20px;
                padding-top: 14px;
                box-sizing: border-box;
            }
            .triangle{
                display: inline-block;
                content: '';
                width: 8px;
                height: 8px;
                background-image: url("subtract.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .menu{
                width: 96px;
                padding: 8px 0;
                box-sizing: border-box;
                box-shadow: 0 0 8px rgba(0,0,0,.16), 0 0 2px rgba(0,0,0,.12);
                border-radius: 4px;
                background-color: white;
                position: absolute;
                top: 55px;
                left: -12%;
                display: none;
            }
            .header-links-item:hover .menu{
                display: block;
            }
            .menu>a{
                width: 100%;
                height: 40px;
                font-size: 15px;
                line-height: 40px;
                text-align: center;
                display: block;
                color: rgba(0,0,0,.9);
            }
            .menu>a:hover{
                background-color: #eeeeee;
            }
            .unmute{
                width: 22px;
                height: 22px;
                background: url("unmute.png") no-repeat  ;
                background-size: cover;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="bg-video">
                <video src="https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4" muted autoplay loop class="video-tvc"></video>
            </div>
            <div class="content">
                <div class="header">
                    <div class="header-right">
                        <ul class="header-links">
                            <li class="header-links-item">
                                <a href="https://creator.douyin.com/">创作服务平台</a>
                                <div class="create-platform">原【视频上传】已并入此功能</div>
                            </li>
                            <li  class="header-links-item">
                                <a href="">开放平台</a>
                            </li>
                            <li  class="header-links-item">
                                <a href="">系列产品</a>
                                <span class="triangle"></span>
                                <div class="menu">
                                    <a href="">抖音火山版</a>
                                    <a href="">剪映</a>
                                    <a href="">多闪</a>
                                </div>
                            </li>
                            <li  class="header-links-item">
                                <a href="">抖音直播</a>
                                <span class="triangle"></span>
                                <div class="menu">
                                    <a href="">直播机构入驻</a>
                                </div>
                            </li>
                            <li  class="header-links-item">
                                <a href="">合作入驻</a>
                                <span class="triangle"></span>
                                <div class="menu">
                                    <a href="">MCN入驻</a>
                                    <a href="">抖音特效师</a>
                                    <a href="">抖音音乐人</a>
                                    <a href="">社会机构入驻</a>
                                </div>
                            </li>
                            <li  class="header-links-item">
                                <a href="">企业合作</a>
                                <span class="triangle"></span>
                                <div class="menu">
                                    <a href="">企业服务平台</a>
                                    <a href="">企业认证</a>
                                    <a href="">广告投放</a>
                                </div>
                            </li>
                            <li  class="header-links-item">
                                <a href="">联系我们</a>
                            </li>
                            <li class="header-links-item">
                                <div class="unmute"></div>
                            </li>
                        </ul>
                    </div>
                </div> 
            </div>
            
        </div>
      
    </body>
</html>